<template>
  <a-form class="w-full md:w-full mt-3" :model="password" @submit="modifyPassword">
    <a-form-item label="旧密码" field="oldPassword" label-col-flex="80px" :rules="[{ required: true, message: '旧密码必填' }]">
      <a-input-password v-model="password.oldPassword" allow-clear autocomplete="off" />
    </a-form-item>
    <a-form-item label="新密码" field="newPassword" label-col-flex="80px" :rules="[{ required: true, message: '新密码必填' }]">
      <a-input-password v-model="password.newPassword" @input="checkSafe" @clear="() => passwordSafePercent = 0"
        autocomplete="off" allow-clear />
    </a-form-item>
    <a-form-item label="密码安全" label-col-flex="80px">
      <a-progress :steps="3" status="success" :percent="passwordSafePercent" animation :show-text="false" />
    </a-form-item>
    <a-form-item label="确认密码" field="newPassword_confirmation" label-col-flex="80px"
      :rules="[{ required: true, message: '确认密码必填' }]">
      <a-input-password allow-clear v-model="password.newPassword_confirmation" autocomplete="off" />
    </a-form-item>
    <a-form-item label-col-flex="80px">
      <a-button html-type="submit" type="primary">保存</a-button>
    </a-form-item>
  </a-form>

  <a-modal v-model:visible="visible" @ok="resetLogin">
    <template #title>提示</template>
    密码已经修改成功，需要重新登录系统，点击确定跳转登录页面。
  </a-modal>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import user from '@/api/system/user'
  import tool from '@/utils/tool'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const password = reactive({
    oldPassword: '',
    newPassword: '',
    newPassword_confirmation: ''
  })

  const visible = ref(false)
  const passwordSafePercent = ref(0)

  const resetLogin = () => {

    router.push({name:'login'})
  }

  const modifyPassword = async (data) => {
    if (! data.errors) {
      if (data.values.newPassword !== data.values.newPassword_confirmation) {
        Message.error('确认密码与新密码不一致')
        return
      }
      const response = await user.modifyPassword(data.values)
      if (response.success) {
        tool.local.clear()
        visible.value = true
      } else {
        Message.error(response.message)
      }
    }
  }

  const checkSafe = (password) => {
    if (password.length < 1) {
      passwordSafePercent.value = 0
      return
    }

    if (! (password.length >= 6) ) {
      passwordSafePercent.value = 0
      return
    }

    passwordSafePercent.value = 0.1

    if (/\d/.test(password)) {
      passwordSafePercent.value += 0.1
    }

    if (/[a-z]/.test(password)) {
      passwordSafePercent.value += 0.1
    }

    if (/[A-Z]/.test(password)) {
      passwordSafePercent.value += 0.3
    }

    if (/[`~!@#$%^&*()_+<>?:"{},./;'[\]]/.test(password)) {
      passwordSafePercent.value += 0.4
    }
  }
</script>
